<template>
  <mt-tabbar v-model="selected" :fixed='isFixed'>
    <mt-tab-item id="index">
      <div class="iconfont tab-item">&#xe639;</div>
      首页
    </mt-tab-item>
    <mt-tab-item id="fennei">
      <div class="iconfont tab-item">&#xe619;</div>
      分类
    </mt-tab-item>
    <mt-tab-item id="pinpai">
      <div class="iconfont tab-item">&#xe607;</div>
      品牌
    </mt-tab-item>
    <mt-tab-item id="tuangou">
      <div class="iconfont tab-item">&#xe600;</div>
      团购
    </mt-tab-item>
    <mt-tab-item id="mine">
      <div class="iconfont tab-item">&#xe670;</div>
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>

<script>
    export default {
        name: "TabBar",
        data(){
          return{
            selected:'',
            isFixed:true
          }
        },
        watch:{
          /*selected(newV,oldV){
            //console.log(newV,oldV);
            console.log(this.selected);
            this.$router.push({name:newV})
          }*/
          selected(){
            //console.log(this.selected);
            this.$router.push({name:this.selected})
          }
        }
    }
</script>

<style scoped>
   .tab-item {
    font-size: 1.3rem;
    margin-bottom: .15rem;
    color:#EA3321;
  }
  .is-selected{
    color: #ff4061!important;
  }
  .is-selected .tab-item[data-v-c8066fbc] {
    color: #33ea7f;
  }
  .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #581513;
  }
</style>
